<template>
    <div style="padding: 0 17px">
        <Breadcrumb/>
        <div style="display: flex;flex-wrap: wrap; margin-top: 20px;">
            <div style="width: 350px;display: flex">
                <el-date-picker
                        v-model="searchData"
                        type="datetimerange"
                        range-separator="到"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        value-format="YYYY-MM-DD HH:mm:ss"
                />
                <el-button type="primary"
                           style="color: #fff;font-size: 12px;background-color: #1890ff;margin-left: 15px"
                           @click="load">搜索
                </el-button>
            </div>
        </div>
        <el-table :data="tableData" :row-style="{ height: '77px' }" border
                  style="width: calc(100vw - 240px);margin-top: 20px;height: 70vh;color: #909399;font-size: 15px;">
            <el-table-column prop="equipmentId" label="设备识别码" width="120" fixed="left"/>
            <el-table-column prop="sendTime" label="发送时间" width="160" fixed="left"/>

            <!-- 状态标志组 -->
            <el-table-column label="状态标志" width="300">
                <el-table-column prop="hasPower" label="电能" width="80">
                    <template v-slot="scope">
                        <el-tag type="danger" v-if="scope.row.hasPower === 0">无电能</el-tag>
                        <el-tag type="success" v-else-if="scope.row.hasPower === 1">有电能</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="hasHarmonic" label="谐波" width="80">
                    <template v-slot="scope">
                        <el-tag type="danger" v-if="scope.row.hasHarmonic === 0">无谐波</el-tag>
                        <el-tag type="success" v-else-if="scope.row.hasHarmonic === 1">有谐波</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="phaseType" label="相数" width="80">
                    <template v-slot="scope">{{ scope.row.phaseType === 1 ? '三相' : '单相' }}</template>
                </el-table-column>
                <el-table-column prop="diChannels" label="DI通道" width="80">
                    <template v-slot="scope">{{ scope.row.diChannels === 1 ? '4DI' : '2DI' }}</template>
                </el-table-column>
            </el-table-column>

            <!-- 通道配置 -->
            <el-table-column label="通道配置" width="200">
                <el-table-column prop="leakageChannels" label="漏电通道" width="100"/>
                <el-table-column prop="tempChannels" label="温度通道" width="100"/>
            </el-table-column>

            <!-- 报警状态 -->
            <el-table-column label="报警状态" width="400">
                <el-table-column label="漏电" width="100">
                    <template v-slot="scope">
                        <el-tag type="success" v-if="scope.row.leakageAlarmBit === 0">正常</el-tag>
                        <el-tag type="danger" v-else-if="scope.row.leakageAlarmBit === 1">报警</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="温度" width="300">
                    <el-table-column label="通1" width="75">
                        <template v-slot="scope">
                            <el-tag type="success" v-if="scope.row.temp1AlarmBit === 0">正常</el-tag>
                            <el-tag type="danger" v-else-if="scope.row.temp1AlarmBit === 1">报警</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="通2" width="75">
                        <template v-slot="scope">
                            <el-tag type="success" v-if="scope.row.temp2AlarmBit === 0">正常</el-tag>
                            <el-tag type="danger" v-else-if="scope.row.temp2AlarmBit === 1">报警</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="通3" width="75">
                        <template v-slot="scope">
                            <el-tag type="success" v-if="scope.row.temp3AlarmBit === 0">正常</el-tag>
                            <el-tag type="danger" v-else-if="scope.row.temp3AlarmBit === 1">报警</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="通4" width="75">
                        <template v-slot="scope">
                            <el-tag type="success" v-if="scope.row.temp4AlarmBit === 0">正常</el-tag>
                            <el-tag type="danger" v-else-if="scope.row.temp4AlarmBit === 1">报警</el-tag>
                        </template>
                    </el-table-column>
                </el-table-column>
            </el-table-column>

            <!-- 故障状态 -->
            <el-table-column label="故障状态" width="400">
                <el-table-column label="漏电" width="100">
                    <template v-slot="scope">
                        <el-tag type="success" v-if="scope.row.leakageFaultBit === 0">正常</el-tag>
                        <el-tag type="danger" v-else-if="scope.row.leakageFaultBit === 1">故障</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="温度" width="300">
                    <el-table-column label="通1" width="75">
                        <template v-slot="scope">
                            <el-tag type="success" v-if="scope.row.temp1FaultBit === 0">正常</el-tag>
                            <el-tag type="danger" v-else-if="scope.row.temp1FaultBit === 1">故障</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="通2" width="75">
                        <template v-slot="scope">
                            <el-tag type="success" v-if="scope.row.temp2FaultBit === 0">正常</el-tag>
                            <el-tag type="danger" v-else-if="scope.row.temp2FaultBit === 1">故障</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="通3" width="75">
                        <template v-slot="scope">
                            <el-tag type="success" v-if="scope.row.temp3FaultBit === 0">正常</el-tag>
                            <el-tag type="danger" v-else-if="scope.row.temp3FaultBit === 1">故障</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="通4" width="75">
                        <template v-slot="scope">
                            <el-tag type="success" v-if="scope.row.temp4FaultBit === 0">正常</el-tag>
                            <el-tag type="danger" v-else-if="scope.row.temp4FaultBit === 1">故障</el-tag>
                        </template>
                    </el-table-column>
                </el-table-column>
            </el-table-column>

            <!-- 使能状态 -->
            <el-table-column label="使能状态" width="600">
                <el-table-column label="漏电" width="100">
                    <template v-slot="scope">
                        <el-tag type="danger" v-if="scope.row.leakageLinkBit === 0">关闭</el-tag>
                        <el-tag type="success" v-else-if="scope.row.leakageLinkBit === 1">开启</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="温度" width="300">
                    <el-table-column label="通1" width="75">
                        <template v-slot="scope">
                            <el-tag type="danger" v-if="scope.row.temp1LinkBit === 0">关闭</el-tag>
                            <el-tag type="success" v-else-if="scope.row.temp1LinkBit === 1">开启</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="通2" width="75">
                        <template v-slot="scope">
                            <el-tag type="danger" v-if="scope.row.temp2LinkBit === 0">关闭</el-tag>
                            <el-tag type="success" v-else-if="scope.row.temp2LinkBit === 1">开启</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="通3" width="75">
                        <template v-slot="scope">
                            <el-tag type="danger" v-if="scope.row.temp3LinkBit === 0">关闭</el-tag>
                            <el-tag type="success" v-else-if="scope.row.temp3LinkBit === 1">开启</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="通4" width="75">
                        <template v-slot="scope">
                            <el-tag type="danger" v-if="scope.row.temp4LinkBit === 0">关闭</el-tag>
                            <el-tag type="success" v-else-if="scope.row.temp4LinkBit === 1">开启</el-tag>
                        </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column label="DI/DO" width="300">
                    <el-table-column label="DI1" width="75">
                        <template v-slot="scope">
                            <el-tag type="danger" v-if="scope.row.di1LinkBit === 0">关闭</el-tag>
                            <el-tag type="success" v-else-if="scope.row.di1LinkBit === 1">开启</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="DI2" width="75">
                        <template v-slot="scope">
                            <el-tag type="danger" v-if="scope.row.di2LinkBit === 0">关闭</el-tag>
                            <el-tag type="success" v-else-if="scope.row.di2LinkBit === 1">开启</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="DO1" width="75">
                        <template v-slot="scope">
                            <el-tag type="danger" v-if="scope.row.do1LinkBit === 0">关闭</el-tag>
                            <el-tag type="success" v-else-if="scope.row.do1LinkBit === 1">开启</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="DO2" width="75">
                        <template v-slot="scope">
                            <el-tag type="danger" v-if="scope.row.do2LinkBit === 0">关闭</el-tag>
                            <el-tag type="success" v-else-if="scope.row.do2LinkBit === 1">开启</el-tag>
                        </template>
                    </el-table-column>
                </el-table-column>
            </el-table-column>

            <!-- 电力报警 -->
            <el-table-column label="电力报警" width="375">
                <el-table-column prop="overvoltage" label="过压" width="75">
                    <template v-slot="scope">
                        <el-tag type="success" v-if="scope.row.overvoltage === 0">正常</el-tag>
                        <el-tag type="danger" v-else-if="scope.row.overvoltage === 1">报警</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="undervoltage" label="欠压" width="75">
                    <template v-slot="scope">
                        <el-tag type="success" v-if="scope.row.undervoltage === 0">正常</el-tag>
                        <el-tag type="danger" v-else-if="scope.row.undervoltage === 1">报警</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="phaseloss" label="缺相" width="75">
                    <template v-slot="scope">
                        <el-tag type="success" v-if="scope.row.phaseloss === 0">正常</el-tag>
                        <el-tag type="danger" v-else-if="scope.row.phaseloss === 1">报警</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="overcurrent" label="过流" width="75">
                    <template v-slot="scope">
                        <el-tag type="success" v-if="scope.row.overcurrent === 0">正常</el-tag>
                        <el-tag type="danger" v-else-if="scope.row.overcurrent === 1">报警</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="overcapacity" label="过载" width="75">
                    <template v-slot="scope">
                        <el-tag type="success" v-if="scope.row.overcapacity === 0">正常</el-tag>
                        <el-tag type="danger" v-else-if="scope.row.overcapacity === 1">报警</el-tag>
                    </template>
                </el-table-column>
            </el-table-column>

            <!-- 监测数值 -->
            <el-table-column label="监测值" width="850">
                <el-table-column prop="leakageValue" label="漏电(mA)" width="100">
                    <template v-slot="scope">{{ formatNumber(scope.row.leakageValue) }}</template>
                </el-table-column>
                <el-table-column label="温度(℃)" width="300">
                    <el-table-column label="通1" width="75">
                        <template v-slot="scope">{{ formatNumber(scope.row.temp1) }}</template>
                    </el-table-column>
                    <el-table-column label="通2" width="75">
                        <template v-slot="scope">{{ formatNumber(scope.row.temp2) }}</template>
                    </el-table-column>
                    <el-table-column label="通3" width="75">
                        <template v-slot="scope">{{ formatNumber(scope.row.temp3) }}</template>
                    </el-table-column>
                    <el-table-column label="通4" width="75">
                        <template v-slot="scope">{{ formatNumber(scope.row.temp4) }}</template>
                    </el-table-column>
                </el-table-column>
                <el-table-column label="电压(V)" width="225">
                    <el-table-column label="A" width="75">
                        <template v-slot="scope">{{ formatNumber(scope.row.voltageA) }}</template>
                    </el-table-column>
                    <el-table-column label="B" width="75">
                        <template v-slot="scope">{{ formatNumber(scope.row.voltageB) }}</template>
                    </el-table-column>
                    <el-table-column label="C" width="75">
                        <template v-slot="scope">{{ formatNumber(scope.row.voltageC) }}</template>
                    </el-table-column>
                </el-table-column>
                <el-table-column label="电流(A)" width="225">
                    <el-table-column label="A" width="75">
                        <template v-slot="scope">{{ formatNumber(scope.row.currentA) }}</template>
                    </el-table-column>
                    <el-table-column label="B" width="75">
                        <template v-slot="scope">{{ formatNumber(scope.row.currentB) }}</template>
                    </el-table-column>
                    <el-table-column label="C" width="75">
                        <template v-slot="scope">{{ formatNumber(scope.row.currentC) }}</template>
                    </el-table-column>
                </el-table-column>
            </el-table-column>

            <!-- 电流和功率 -->
            <el-table-column label="功率/电能" width="200">
                <el-table-column prop="power" label="功率(kW)" width="100">
                    <template v-slot="scope">{{ formatNumber(scope.row.power) }}</template>
                </el-table-column>
                <el-table-column prop="energy" label="电能(kWh)" width="100">
                    <template v-slot="scope">{{ scope.row.energy }}</template>
                </el-table-column>
            </el-table-column>

            <!-- 变比设置 -->
            <el-table-column label="变比设置" width="200">
                <el-table-column prop="ptRatio" label="电压变比" width="100"/>
                <el-table-column prop="ctRatio" label="电流变比" width="100"/>
            </el-table-column>

            <!-- 控制域 -->
            <el-table-column label="控制域" width="400">
                <el-table-column prop="ctrlDataDomain" label="数据域" width="100">
                    <template v-slot="scope">
                        {{ formatDomain(scope.row.ctrlDataDomain) }}
                    </template>
                </el-table-column>
                <el-table-column prop="ctrlNeedAck" label="应答标识" width="100">
                    <template v-slot="scope">
                        {{ scope.row.ctrlNeedAck === 1 ? '需应答' : '无需应答' }}
                    </template>
                </el-table-column>
                <el-table-column prop="ctrlCommStatus" label="通信状态" width="100">
                    <template v-slot="scope">
                        {{ scope.row.ctrlCommStatus === 1 ? '正常' : '异常' }}
                    </template>
                </el-table-column>
                <el-table-column prop="ctrlReportMode" label="上报模式" width="100">
                    <template v-slot="scope">
                        {{ formatReportMode(scope.row.ctrlReportMode) }}
                    </template>
                </el-table-column>
                <el-table-column prop="ctrlAddrMode" label="寻址模式" width="100">
                    <template v-slot="scope">
                        {{ formatAddrMode(scope.row.ctrlAddrMode) }}
                    </template>
                </el-table-column>
            </el-table-column>

            <!-- 操作列 -->
            <el-table-column align="center" label="操作" fixed="right" width="180">
                <template v-slot="scope">
                    <el-button type="danger" size="small" icon="Delete" @click="deleteItem(scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                :current-page="currentPage"
                :page-size="pageSize"
                :page-sizes="[10, 20, 30, 50]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                :background="true"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
        />
    </div>
</template>

<script>
    import request from "@/utils/request.js";
    import Breadcrumb from "@/components/Breadcrumb.vue";

    export default {
        name: "FireSysData",
        components: {Breadcrumb},
        data() {
            return {
                currentData: {},
                searchData: [],
                tableData: [],  // 表单
                currentPage: 1,
                pageSize: 10,
                total: 0,
            }
        },
        mounted() {
            this.load()
        },
        methods: {
            // 格式化数值(保留两位小数)
            formatNumber(value) {
                if (value === null || value === undefined) return '-';
                return parseFloat(value).toFixed(2);
            },

            // 格式化数据域类型
            formatDomain(value) {
                if (value === null || value === undefined) return '-';
                const domainMap = {
                    0: '数据域',
                    1: '设置域',
                    2: '控制域'
                };
                return domainMap[value] || '未知';
            },

            // 格式化上报模式
            formatReportMode(value) {
                if (value === null || value === undefined) return '-';
                const modeMap = {
                    0: '主机轮询',
                    1: '从机应答',
                    2: '定时上报',
                    3: '变位上报'
                };
                return modeMap[value] || '未知';
            },

            // 格式化寻址模式
            formatAddrMode(value) {
                if (value === null || value === undefined) return '-';
                const addrMap = {
                    0: '四级地址',
                    1: '设备ID',
                    2: '逻辑地址',
                    3: '广播'
                };
                return addrMap[value] || '未知';
            },

            // 搜索及初始化
            load() {
                let startTime = "", endTime = ""
                if (this.searchData !== null && this.searchData.length !== 0) {
                    startTime = this.searchData[0]
                    endTime = this.searchData[1]
                }
                request.get("/sdf300-history-data/page?pageNum=" + this.currentPage + "&pageSize=" + this.pageSize + "&equipmentInputStoreId=" + this.$route.query.equipmentInputStoreId + "&startTime=" + startTime + "&endTime=" + endTime).then(res => {
                    if (res.code === '200') {
                        for (let key in res.data) {
                            if (key === "record") {
                                this.tableData = res.data[key];
                            } else if (key === "total") {
                                this.total = res.data[key];
                            }
                        }
                    } else {
                        this.$message.error("错误" + res.msg)
                    }
                })
            },
            reset(val) {
                this.isEdit = false;
                this.operationItemDialog = false;
                this.form = {};
                this.$refs[val].clearValidate();
            },
            // 删除确定弹窗
            deleteItem(scope) {
                this.$confirm('是否确定删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    request.get("/sdf300-history-data/delete/" + scope.id).then(res => {
                        if (res.code === '200') {
                            this.$message.success("成功")
                            this.load()
                        } else {
                            this.$message.error(res.msg)
                        }
                    })
                });
            },
            handleSizeChange(pageSize) {   // 改变当前每页的个数触发
                this.pageSize = pageSize
                this.load()
            },
            handleCurrentChange(pageNum) {  // 改变当前页码触发
                this.currentPage = pageNum
                this.load()
            },
        }
    }
</script>

<style scoped>
    :deep(.el-table th .cell) {
        font-weight: 700
    }
</style>
